<template>
  <div>
    <div class="margin-container-list">
      <div class="tab-style-default">
        <el-tabs v-model="dataListQuery.status" @tab-click="handleClick">
          <el-tab-pane :label="'全部(' + allNum + ')'" name="0"></el-tab-pane>
          <el-tab-pane :label="'生成中(' + ingNum + ')'" name="1"></el-tab-pane>
          <el-tab-pane :label="'完成(' + complateNum + ')'" name="2"></el-tab-pane>
          <el-tab-pane :label="'失败(' + failNum + ')'" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="dataListQuery.keyword" placeholder="报表名称/操作人/操作手机号"
              style="width: 400px"></el-input>
            <el-select v-model="dataListQuery.reportCenterType" placeholder class="pad-l-10 takeSelect"
              placeholder="请选择报表类型" clearable>
              <el-option value="" label="全部">全部</el-option>
              <el-option v-for="(key,value) in reportCenterTypeOptions" :key="value" :label="key" :value="value">
              </el-option>
            </el-select>
            <el-select v-model="dataListQuery.reportDataType" placeholder class="pad-l-10" placeholder="请选择报表数据类型"
              clearable>
              <el-option value="" label="全部">全部</el-option>
              <el-option v-for="(key,value) in reportDataTypeOptions" :key="value" :label="key" :value="value">
              </el-option>
            </el-select>
            <el-date-picker v-model="datePicker" type="daterange" unlink-panels range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="开始时间"
              end-placeholder="结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <br>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
          element-loading-text="加载中" style="width: 100%">
          <el-table-column width="55px" type="selection"></el-table-column>
          <el-table-column label="报表名称" prop="reportName" />
          <el-table-column label="报表类型" prop="reportName" align="center" width="80px">
            <template slot-scope="scope">
              {{reportCenterTypeOptions[scope.row.reportCenterType]}}
            </template>
          </el-table-column>
          <el-table-column width="140px" label="报表数据类型" prop="reportDataType" align="center">
            <template slot-scope="scope">
              {{reportDataTypeOptions[scope.row.reportDataType]}}
            </template>
          </el-table-column>
          <el-table-column label="总条数" prop="totalNumber" align="center" width="110px">
            <template slot-scope="scope">
              <div v-if="scope.row.reportCenterType === 2">
                <span>{{scope.row.totalNumber}}</span>
              </div>
              <div v-else>
                <span>----</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="成功数" prop="totalSuccessNumber" align="center" width="110px">
            <template slot-scope="scope">
              <div v-if="scope.row.reportCenterType === 2">
                <span>{{scope.row.totalSuccessNumber}}</span>
              </div>
              <div v-else>
                <span>----</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="失败数" prop="totalFailNumber" align="center" width="110px">
            <template slot-scope="scope">
              <div v-if="scope.row.reportCenterType === 2">
                <span>{{scope.row.totalFailNumber}}</span>
              </div>
              <div v-else>
                <span>----</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" align="center" width="110px">
            <template slot-scope="scope">
              {{reportCenterTypeOptions[scope.row.reportCenterType]}}{{statusOptions[scope.row.status]}}
              <el-tooltip v-if="scope.row.statusRemark && scope.row.status === 3" class="item" effect="dark"
                :content="scope.row.statusRemark" placement="top-end">
                <el-link type="primary" :underline="false">原因</el-link>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="操作人" prop="operatorName" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{scope.row.operatorName}}</div>
              <div v-if="scope.row.operatorPhone">{{scope.row.operatorPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column width="110px" label="创建时间" prop="createTime" align="center"></el-table-column>
          <el-table-column width="110px" label="更新时间" prop="updateTime" align="center"></el-table-column>
          <el-table-column width="140px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <template v-if="scope.row.reportCenterType  === 1">
                <el-button v-if="scope.row.reportUrl && scope.row.status === 2" type="text" size="medium"
                  @click="handleLoadFile(scope.row)">下载</el-button>
              </template>
              <template v-if="scope.row.reportCenterType  === 2 && scope.row.status === 2">
                <el-button v-if="scope.row.reportDataType === 1 && scope.row.totalFailNumber > 0" type="text"
                  size="medium" @click="handleLoadFile(scope.row)">
                  下载失败数据</el-button>
              </template>
              <template v-if="scope.row.status  === 1">
                <el-button type="text" size="medium" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="dataListQuery.currentPage"
        :limit.sync="dataListQuery.size" @pagination="initData" />
    </div>
  </div>
</template>

<script>
  import {
    paging,
    statisticsStatusNumber,
    doExportImportGoodsFail,
    deleteBatchReport
  } from '@/api/reportCenter/handReportCenter'

  export default {
    data() {
      return {
        total: 0,
        dataList: [],
        listLoading: false,
        dataListQuery: {
          keyword: '',
          startDate: '',
          endDate: '',
          currentPage: 1,
          size: 10,
          reportCenterType: '',
          status: '0',
          reportDataType: ''
        },
        datePicker: [],
        allNum: 0,
        ingNum: 0,
        complateNum: 0,
        failNum: 0,
        reportStatus: '',
        statusOptions: {},
        reportDataTypeOptions: {},
        reportCenterTypeOptions: {},
        pReportDataType: '',
        pReportCenterType: ''
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      const reportCenterType = queryParams.reportCenterType
      if (reportCenterType) {
        this.pReportCenterType = reportCenterType
      }
      const reportDataType = queryParams.reportDataType
      if (reportDataType) {
        this.pReportDataType = reportDataType
      }
      this.listLoading = false
      this.initData()
    },
    mounted() {},
    methods: {
      handleClick() {
        this.initData()
      },
      initData() {
        var that = this
        that.listLoading = true
        that.dataListQuery.enterpriseId = this.getEnterpriseId()
        that.dataListQuery.supplierId = this.getSupplierId()
        const datePicker = that.datePicker
        if (that.$utils.isExist(datePicker) && datePicker.length > 0) {
          that.dataListQuery.startDate = datePicker[0]
          that.dataListQuery.endDate = datePicker[1]
        } else {
          that.dataListQuery.startDate = ''
          that.dataListQuery.endDate = ''
        }
        if (that.pReportDataType) {
          that.dataListQuery.reportDataType = that.pReportDataType
        }
        if (that.pReportCenterType) {
          that.dataListQuery.reportCenterType = that.pReportCenterType
        }
        if (that.getMemberId()) {
          that.dataListQuery.memberId = that.getMemberId()
        }

        statisticsStatusNumber(that.dataListQuery).then(response => {
          that.ingNum = 0
          that.complateNum = 0
          that.failNum = 0
          var sList = response.data
          if (sList && sList.length > 0) {
            sList.forEach(function(item, index) {
              if (item.typeValue === 1) {
                that.ingNum = item.totalCount
              } else if (item.typeValue === 2) {
                that.complateNum = item.totalCount
              } else if (item.typeValue === 3) {
                that.failNum = item.totalCount
              }
            })
          }
          that.allNum = parseInt(that.ingNum) + parseInt(that.complateNum) + parseInt(that.failNum)
        })
        paging(that.dataListQuery).then(response => {
          that.dataList = response.data.records
          that.total = response.data.total
          that.statusOptions = response.data.dict.status
          that.reportCenterTypeOptions = response.data.dict.type
          that.reportDataTypeOptions = response.data.dict.reportDataType
          that.listLoading = false
        })
      },
      resetSearch() {
        const originData = this.$options.data()
        this.dataListQuery = originData.dataListQuery
        this.pReportDataType = ''
        this.pReportCenterType = ''
        this.datePicker = []
        this.initData()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initData()
      },
      handleLoadFile(row) {
        if (row.reportCenterType === 2) {
          if (row.reportDataType === 1) {
            doExportImportGoodsFail(row.reportCenterId).then(response => {
              if (response.isError) return
              this.$message({
                message: response.msg,
                type: 'success'
              })
              this.initData()
            })
          }
        } else {
          if (row.reportUrl) {
            window.open(row.reportUrl, '_blank')
          } else {
            this.$message({
              message: '请选择要下载的报表数据!',
              type: 'error'
            })
          }
        }
      },
      handleDelete(row) {
        this.$confirm('报表正在生成中，确定要删除报表吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var reportCenterIds = []
          reportCenterIds.push(row.reportCenterId)
          deleteBatchReport(reportCenterIds).then(response => {
            if (response.isError) return
            this.initData()
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    min-width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .flex-cag-box {
    padding: 0px 0px 20px 70px;

    .mission-type:nth-child(4n) {
      margin-right: 0px;
    }
  }

  .next-step-btn {
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }

  .user-avatar {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>
